<template>
    <div class="cover">
        <div class="coverbg">
            <img 
                :src="coverUrl"
                class="record"
                alt=""
                :style="{transform:'rotate('+coverdeg+'deg)'}">
        </div>
        <div class="pingbg" :style="{transform:'rotate('+pingdeg+'deg)'}">
            <img src="../../assets/player_bar.png" class="ping">
        </div>
    </div>
</template>
<script>
export default {
    name:'Cover',
    props:{
        coverObj: {
            type: Object,
            required: true
        }
    },
    data(){
        return{
            coverUrl:'',
            coverdeg:0,
            pingdeg:0,
            songDuration: 0,
            currentTime:0,
            coverTimer:'',
            nowping:12
        }
    },
    watch:{
        'coverObj.currentTime'(){
            this.ChangeOfProgress()
        },
        'coverObj.id'(){
            this.coverdeg = 0
            this.pingdeg = 0
            this.getSongCover()
            this.pingRotate()
        },
        'coverObj.audioisplay'(){
            this.controlRotate()
        }
    },
    methods:{
        //获得歌曲封面
        getSongCover() {
            let o = {
                ids: this.coverObj.id
            }
            this.$api.SongCover(o).then(res => {
                this.coverUrl = res.songs[0].al.picUrl
            }).catch(() => {})
        },
        // 唱片针到达唱片
        pingRotate(){
            this.pingdeg = 12
        },
        //封面旋转函数 歌曲时长
        coverRotate() {
            clearInterval(this.coverTimer)
            this.coverTimer = setInterval(() => {
                this.currentTime+=0.1
                this.coverdeg++
                this.pingdeg += 22 / this.coverObj.songDuration / 10
                this.EndOfPLay()
            }, 100);
        },
        
        // 判断歌曲播放状态
        controlRotate(){
            if(this.coverObj.audioisplay){
                 this.pingdeg=this.nowping
                this.coverRotate()
            }else{
                 this.nowping=this.pingdeg
                clearInterval(this.coverTimer)
                 this.pingdeg=0
            }
        },

        // 播放结束结束时清除定时器
        EndOfPLay(){
            if (this.coverObj.songDuration > 0 && this.currentTime >= this.coverObj.songDuration) {
                clearInterval(this.coverTimer)
                this.coverdeg = 0
                this.pingdeg = 0
            } 
        },

        //人为改变进度条时
        ChangeOfProgress(){
            this.coverdeg+=(this.coverObj.currentTime-this.currentTime)*10
            this.pingdeg+=(this.coverObj.currentTime-this.currentTime)*10*(22 / this.coverObj.songDuration / 10)
            this.currentTime=this.coverObj.currentTime
        }
    }
}
</script>
<style scoped>

/* 中心封面 */
.cover {
    width: 481px;
    height: 100%;
    position: relative;
}

/* 中心封面背景圆 */
 .cover .coverbg {
    position: relative;
    width: 80%;
    height: 80%;
    margin: 40px auto;
    background: url(../../assets/disc.png) no-repeat center center/100% 100%;
}

/* 封面 */
 .cover .record {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 5px solid #fff;
}

/* 中心封面唱片针外部盒子 */
 .cover .pingbg {
    width: 184px;
    height: 256px;
    position: absolute;
    top: -140px;
    right: 50px;
    transform: rotate(0deg);
}

/* 封面唱片针 */
 .cover .pingbg .ping {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* 封面与评论区之间线 */
 .cover:after {
    content: '';
    position: absolute;
    background: url(../../assets/line.png) no-repeat center center/100% 100%;
    width: 2px;
    height: 440px;
    right: 20px;
    top: 10px;
}

</style>